import React, { FC } from "react";
import {
  QuestionParagraphDefaultProps,
  QuestionPargraphPropsType,
} from "./interface";
import { Typography } from "antd";

const { Paragraph } = Typography;

const Component: FC<QuestionPargraphPropsType> = (
  props: QuestionPargraphPropsType
) => {
  const { text = "", isCenter = false } = {
    ...QuestionParagraphDefaultProps,
    ...props,
  };

  // const t = text.replaceAll("\n", "<br/>");

  const textList = text.split("\n"); //  以换行符作为切割，返回数据

  return (
    <Paragraph
      style={{ textAlign: isCenter ? "center" : "start", marginBottom: "0" }}
    >
      {/* dangerouslySetInnerHTML={{ __html: t }} 可以直接渲染标签,但是不严谨，用户可以直接编辑html标签或视频链接做非法的事情 */}
      {textList.map((t, index) => (
        <span key={index}>
          {index > 0 && <br />} {t}
        </span>
      ))}
    </Paragraph>
  );
};

export default Component;
